<template>
  <div class="app-container">
    <el-card class="box-card">
      <div slot="header" class="clearfix">

        <div class="flex justify-between items-center">
          <div>
            <el-button class="marginRB10" type="primary" @click="handleResetHeat"
            >批量重置热度
            </el-button>
            <el-button class="marginRB10" type="danger" @click="handleDeleteAll"
            >批量删除
            </el-button>
          </div>
          <div>
            <el-button class="marginRB10" type="primary" @click="searchList">
              搜索
            </el-button>
            <el-button class="marginRB10" type="primary" @click="resetList">
              重置
            </el-button>
          </div>
        </div>

        <el-select
          v-model="listQuery.type_id"
          class="marginRB10"
          clearable
          filterable
          placeholder="请选择房间分类"
          @clear="listQuery.type_id = undefined"
        >
          <el-option
            v-for="item in type_idStatus"
            :key="item.key"
            :label="item.lab"
            :value="item.key"
          ></el-option>
        </el-select>
        <el-select
          v-model="listQuery.label_id"
          class="marginRB10"
          clearable
          filterable
          placeholder="请选择房间标签"
          @clear="listQuery.label_id = undefined"
        >
          <el-option
            v-for="item in label_idStatus"
            :key="item.key"
            :label="item.lab"
            :value="item.key"
          ></el-option>
        </el-select>
        <el-select
          v-model="listQuery.status"
          class="marginRB10"
          clearable
          filterable
          placeholder="请选择房间状态"
          @clear="listQuery.status = undefined"
        >
          <el-option
            v-for="item in statusStatus"
            :key="item.key"
            :label="item.lab"
            :value="item.key"
          ></el-option>
        </el-select>
        <el-select
          v-model="listQuery.recommend_status"
          class="marginRB10"
          clearable
          filterable
          placeholder="请选择推荐状态"
          @clear="listQuery.status = undefined"
        >
          <el-option
            v-for="item in recommend_statusStatus"
            :key="item.key"
            :label="item.lab"
            :value="item.key"
          ></el-option>
        </el-select>
        <el-select
          v-model="listQuery.top_status"
          class="marginRB10"
          clearable
          filterable
          placeholder="请选择置顶状态"
          @clear="listQuery.status = undefined"
        >
          <el-option
            v-for="item in top_statusStatus"
            :key="item.key"
            :label="item.lab"
            :value="item.key"
          ></el-option>
        </el-select>
        <!-- <el-select
          v-model="listQuery.ball_status"
          class="marginRB10"
          clearable
          filterable
          placeholder="是否显示球球游戏"
          @clear="listQuery.ball_status = undefined"
        >
          <el-option
            v-for="item in ballStatus"
            :key="item.key"
            :label="item.lab"
            :value="item.key"
          ></el-option>
        </el-select> -->
        <el-date-picker
          v-model="listQuery.start_at"
          class="marginRB10"
          clearable
          placeholder="创建开始时间"
          type="datetime"
          value-format="yyyy-MM-dd HH:mm:ss"
        ></el-date-picker>
        <el-date-picker
          v-model="listQuery.end_at"
          class="marginRB10"
          clearable
          placeholder="创建结束时间"
          type="datetime"
          value-format="yyyy-MM-dd HH:mm:ss"
        ></el-date-picker>
        <el-input
          v-model="listQuery.search"
          class="marginRB10"
          clearable
          placeholder="手机号、房间号、房间名称"
          style="width:200px"
        ></el-input>
        <!-- <el-select
          v-model="listQuery.pk_switch"
          class="marginRB10"
          clearable
          filterable
          placeholder="请选择房间PK状态"
          @clear="listQuery.pk_switch = undefined"
        >
          <el-option
            v-for="item in roomPkStatus"
            :key="item.key"
            :label="item.lab"
            :value="item.key"
          ></el-option>
        </el-select> -->

      </div>
      <div class="item">
        <el-table
          ref="dataList"
          v-loading="listLoading"
          :data="menuList"
          :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
          border
          class="mb-3"
          max-height="1250"
          row-key="id"
          @selection-change="handleSelectionChange"
        >
          <el-table-column type="selection" width="80"></el-table-column>
          <el-table-column label="序号" prop="id" width="80"></el-table-column>
          <el-table-column label="公会号" prop="room_id" width="80"></el-table-column>
          <el-table-column label="房间号" prop="room_code" width="80"></el-table-column>
          <el-table-column label="房间名" prop="room_name" width="120"></el-table-column>
          <el-table-column label="房间封面" prop="cover_picture" width="220">
            <template slot-scope="scope">
              <el-popover max-width="220" placement="right" trigger="hover">
                <img
                  :src="scope.row.cover_picture"
                  alt=""
                  style="max-width: 200px;max-height: 200px"
                />
                <img
                  slot="reference"
                  :src="scope.row.cover_picture"
                  alt=""
                  style="width: 50px;"
                />
              </el-popover>
            </template>
          </el-table-column>
          <el-table-column label="房间背景" prop="bg_picture" width="100">
            <template slot-scope="scope">
              <el-popover max-width="220" placement="right" trigger="hover">
                <img
                  :src="scope.row.bg_picture"
                  alt=""
                  style="max-width: 200px;max-height: 200px"
                />
                <img
                  slot="reference"
                  :src="scope.row.bg_picture"
                  alt=""
                  style="width: 50px;"
                />
              </el-popover>
            </template>
          </el-table-column>
          <el-table-column label="上麦模式" prop="wheat" width="100">
            <template slot-scope="scope">
              {{ scope.row.wheat === 1 ? '自由上麦' : '申请上麦' }}
            </template>
          </el-table-column>
          <el-table-column label="封禁时间" prop="seal_time" width="100"></el-table-column>
          <el-table-column label="注册时间" prop="add_time" width="100"></el-table-column>
          <el-table-column label="显示状态" prop="state" width="100">
            <template slot-scope="scope">
              {{ scope.row.state === 1 ? '显示' : '隐藏' }}
            </template>
          </el-table-column>
          <el-table-column label="置顶状态" prop="top_status" width="100">
            <template slot-scope="scope">
              <el-tag :type="scope.row.top_status===1 ? 'success': 'info'">{{
                  scope.row.top_status === 1 ? '是' : '否'
                }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column label="推荐状态" prop="recommend_status" width="100">
            <template slot-scope="scope">
              <el-tag :type="scope.row.recommend_status ===1 ? 'success': 'info'">{{
                  scope.row.recommend_status === 1 ? '是' : '否'
                }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column label="用户号" prop="user_code" width="100"></el-table-column>
          <el-table-column label="房主电话" prop="mobile" width="130"></el-table-column>
          <el-table-column label="房间标签" prop="label_name" width="100"></el-table-column>
          
          <el-table-column
            label="房间分类"
            prop="sys_type_name"
            width="100"
          ></el-table-column>
          <el-table-column
            label="房间热度"
            prop="water_ratio"
            sortable
            width="120"
          ></el-table-column>
          <el-table-column label="房间PK状态" prop="pk_switch">
            <template slot-scope="scope">
              {{ scope.row.pk_switch === 1 ? '开启' : '关闭' }}
            </template>
          </el-table-column>

          <el-table-column fixed="right" label="操作">
            <template slot-scope="scope">
              <el-dropdown trigger="click">
                <el-button type="primary"
                >操作<i class="el-icon-arrow-down el-icon--right"></i
                ></el-button>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item @click.native="showRecommendedRoom(scope.row)"
                  >{{ scope.row.recommend_status === 1 ? '取消推荐' : '推荐房间' }}
                  </el-dropdown-item
                  >
                  <el-dropdown-item @click.native="showTopRoom(scope.row)"
                  >{{ scope.row.top_status === 1 ? '取消置顶' : '置顶房间' }}
                  </el-dropdown-item
                  >
                  <el-dropdown-item @click.native="rowUpdate(scope.row)"
                  >编辑
                  </el-dropdown-item
                  >
                  <el-dropdown-item @click.native="rowWater(scope.row)"
                  >房间流水
                  </el-dropdown-item
                  >
                  <el-dropdown-item @click.native="rowPopularity(scope.row)"
                  >赠送人气
                  </el-dropdown-item
                  >
                  <el-dropdown-item @click.native="resetAudit(scope.row)"
                  >重置房间审核
                  </el-dropdown-item>
                  <!--                  <el-dropdown-item @click.native="rowHall(scope.row)">创建厅</el-dropdown-item>-->
                  <el-dropdown-item
                    v-if="scope.row.seal_time === ''"
                    @click.native="rowBan(scope.row)"
                  >封房间
                  </el-dropdown-item>

                  <el-dropdown-item
                    v-else
                    @click.native="rowCancelBan(scope.row)"
                  >解封
                  </el-dropdown-item
                  >
                  <el-dropdown-item
                    divided
                    @click.native="rowWaterSet(scope.row)"
                  >流水设置
                  </el-dropdown-item
                  >
                  <!-- <el-dropdown-item @click.native="rowDelete(scope.row)">删除</el-dropdown-item> -->
                </el-dropdown-menu>
              </el-dropdown>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页 -->
        <cus-pagination
          v-show="total > 0"
          :limit.sync="listQuery.perPage"
          :page.sync="listQuery.page"
          :total="total"
          @pagination="getList"
        />
      </div>
    </el-card>

    <el-dialog
      v-dialogDrag
      :title="titleMap[dialogStatus]"
      :visible.sync="dialogFormVisible"
      @close="handleDialogClose"
    >
      <el-form
        ref="dataForm"
        :model="form"
        :rules="formrules"
        label-position="right"
        label-width="120px"
      >
        <el-form-item label="房间名称" prop="room_name">
          <el-input v-model="form.room_name"/>
        </el-form-item>
        <el-form-item label="房间号" prop="room_id">
          <el-input v-model="form.room_id"/>
        </el-form-item>
        <el-form-item label="房间密码" prop="password">
          <el-input v-model.number="form.password" placeholder="留空不做修改"/>
        </el-form-item>
        <el-form-item label="房间玩法" prop="playing">
          <el-input v-model="form.playing" placeholder="请输入房间玩法"/>
        </el-form-item>
        <el-form-item label="房间欢迎语" prop="greeting">
          <el-input v-model="form.greeting" placeholder="请输入房间欢迎语"/>
        </el-form-item>
        <el-form-item label="房间标签" prop="label_id">
          <el-select
            v-model="form.label_id"
            filterable
            placeholder="请选择房间标签"
          >
            <el-option
              v-for="item in labelOptions"
              :key="'房间标签' + item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="个人分类" prop="type_id">
          <el-select
            v-model="form.type_id"
            filterable
            placeholder="请选择个人标签"
          >
            <el-option :value="0" label="请选择"></el-option>
            <el-option
              v-for="item in typeOptions"
              :key="'个人标签' + item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="系统分类" prop="sys_type_id">
          <el-select
            v-model="form.sys_type_id"
            filterable
            placeholder="请选择房间标签"
          >
            <el-option :value="0" label="请选择"></el-option>
            <el-option
              v-for="item in sysTypeOptions"
              :key="'房间标签' + item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="热门排序" prop="hot_sort">
          <el-input v-model="form.hot_sort" placeholder="排序从小到大"/>
        </el-form-item>
        <el-form-item label="热门排序模式" prop="hot_model">
          <el-radio v-model="form.hot_model" :label="0">不设置</el-radio>
          <el-radio v-model="form.hot_model" :label="1">置顶模式</el-radio>
          <el-radio v-model="form.hot_model" :label="2">轮播模式</el-radio>
        </el-form-item>
        <el-form-item label="封面图" prop="cover_picture">
          <el-upload
            ref="upload"
            :auto-upload="true"
            :before-upload="beforeAvatarUpload"
            :file-list="editDetailFileList"
            :http-request="customizeUpload"
            :on-change="handleChangePic"
            :on-remove="handleEditDetailRemove"
            :on-success="handleEditDetailSuccess"
            action=""
            class="upload-demo"
            list-type="picture"
          >
            <el-button slot="trigger" size="small" type="primary"
            >上传封面图
            </el-button
            >
          </el-upload>
        </el-form-item>
        <el-form-item label="背景图" prop="bg_picture">
          <el-upload
            ref="upload"
            :auto-upload="true"
            :before-upload="beforeAvatarUpload"
            :file-list="editDetailFileList2"
            :http-request="customizeUpload"
            :on-change="handleChangePic"
            :on-remove="handleEditDetailRemove2"
            :on-success="handleEditDetailSuccess2"
            action=""
            class="upload-demo"
            list-type="picture"
          >
            <el-button slot="trigger" size="small" type="primary"
            >上传背景图
            </el-button
            >
          </el-upload>
        </el-form-item>
        <el-form-item label="球球大作战游戏" prop="show_ball_game">
          <el-radio v-model="form.show_ball_game" :label="1">显示</el-radio>
          <el-radio v-model="form.show_ball_game" :label="0">隐藏</el-radio>
        </el-form-item>
        <el-form-item label="状态" prop="state">
          <el-radio v-model="form.state" :label="1">显示</el-radio>
          <el-radio v-model="form.state" :label="0">隐藏</el-radio>
        </el-form-item>
        <el-form-item label="周星" prop="star_state">
          <el-radio v-model="form.star_state" :label="1">显示</el-radio>
          <el-radio v-model="form.star_state" :label="0">隐藏</el-radio>
        </el-form-item>
        <el-form-item label="是否靓号房" prop="is_pretty">
          <el-radio v-model="form.is_pretty" :label="1">是</el-radio>
          <el-radio v-model="form.is_pretty" :label="0">否</el-radio>
        </el-form-item>
        <el-form-item label="设置老板麦" prop="is_boss_pit">
          <el-radio v-model="form.is_boss_pit" :label="1">是</el-radio>
          <el-radio v-model="form.is_boss_pit" :label="0">否</el-radio>
        </el-form-item>
        <el-form-item label="房间音效" prop="sound_effect_id">
          <el-select
            v-model="form.sound_effect_id"
            filterable
            placeholder="请选择房间音效"
          >
            <el-option
              v-for="item in soundOptions"
              :key="'房间音效' + item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="房间PK状态" prop="pk_switch">
          <el-switch
            v-model="form.pk_switch"
            :active-value="1"
            :inactive-value="0"
          >
          </el-switch>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer text-center">
        <el-button @click="dialogFormVisible = false">取消</el-button>
        <el-button type="primary" @click="submitForm">确定</el-button>
      </div>
    </el-dialog>

    <!-- 赠送人气 -->
    <el-dialog :visible.sync="sendPopularityVisible" title="赠送人气">
      <el-form
        ref="sendPopularityForm"
        :model="sendPopularityForm"
        :rules="sendPopularityFormRules"
        label-width="120px"
      >
        <el-form-item label="房间名称" prop="room_name">
          <el-input v-model="sendPopularityForm.room_name" disabled></el-input>
        </el-form-item>
        <el-form-item label="赠送人气" prop="popularity">
          <el-input v-model="sendPopularityForm.popularity"></el-input>
        </el-form-item>
        <el-form-item label="过期时间" prop="time">
          <el-date-picker
            v-model="sendPopularityForm.time"
            placeholder="请选择日期时间"
            type="date"
            value-format="yyyy-MM-dd"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button @click="sendPopularityVisible = false">
            取 消
          </el-button>
          <el-button
            type="primary"
            @click="confirmSendPopularity('sendPopularityForm')"
          >
            确 认
          </el-button>
        </el-form-item>
      </el-form>
    </el-dialog>

    <!-- 创建厅 -->
    <el-dialog :visible.sync="createHallVisible" title="创建厅">
      <el-form
        ref="createHallForm"
        :model="createHallForm"
        :rules="createHallFormRules"
        label-width="120px"
      >
        <el-form-item label="公会名称" prop="sociaty_name">
          <el-input v-model="createHallForm.sociaty_name"></el-input>
        </el-form-item>
        <el-form-item label="公会描述" prop="description">
          <el-input
            v-model="createHallForm.description"
            type="textarea"
          ></el-input>
        </el-form-item>
        <el-form-item label="公会号" prop="sociaty_no">
          <el-input v-model.number="createHallForm.sociaty_no"></el-input>
        </el-form-item>
        <el-form-item label="公会logo" prop="avatar">
          <el-upload
            ref="upload"
            :auto-upload="true"
            :before-upload="beforeAvatarUpload"
            :file-list="createHallFileList"
            :http-request="customizeUpload"
            :on-change="handleChangePic"
            :on-remove="handleCreateHallRemove"
            :on-success="handleCreateHallSuccess"
            action=""
            class="upload-demo"
            list-type="picture"
          >
            <el-button slot="trigger" size="small" type="primary"
            >上传LOGO
            </el-button
            >
          </el-upload>
        </el-form-item>
        <el-form-item>
          <el-button @click="createHallVisible = false">
            取 消
          </el-button>
          <el-button
            type="primary"
            @click="confirmCreateHall('createHallForm')"
          >
            确 认
          </el-button>
        </el-form-item>
      </el-form>
    </el-dialog>

    <!-- 房间流水 -->
    <el-dialog :visible.sync="roomWaterVisible" title="房间流水" width="">
      <el-card class="box-card">
        <p style="margin:0 0 20px 0">
          房间总收入:{{ roomWaterHeadTotalPrice }}金币
        </p>
        <div slot="header" class="clearfix">
          <el-date-picker
            v-model="roomWaterQuery.start_time"
            class="marginRB10"
            clearable
            placeholder="创建开始时间"
            type="date"
            value-format="yyyy-MM-dd"
          ></el-date-picker>
          <el-date-picker
            v-model="roomWaterQuery.end_time"
            class="marginRB10"
            clearable
            placeholder="创建结束时间"
            type="date"
            value-format="yyyy-MM-dd"
          ></el-date-picker>
          <el-button class="marginRB10" type="primary" @click="getRoomWaterList"
          >搜索
          </el-button
          >
          <el-button
            class="marginRB10"
            type="primary"
            @click="resetRoomWaterList"
          >重置
          </el-button
          >
        </div>
        <div class="item">
          <el-table v-loading="roomWaterListLoading" :data="roomWaterMenuList">
            <el-table-column label="收入" prop="number">
              <template slot-scope="scope">
                {{ scope.row.number }}金币
              </template>
            </el-table-column>
            <el-table-column label="时间" prop="time"></el-table-column>
          </el-table>
        </div>
      </el-card>
      <cus-pagination
        v-show="roomWaterQuery.total > 0"
        :limit.sync="roomWaterQuery.perPage"
        :page.sync="roomWaterQuery.page"
        :total="roomWaterQuery.total"
        @pagination="getRoomWaterList"
      />
    </el-dialog>

    <!-- 封房间 -->
    <el-dialog :visible.sync="banVisible" title="封禁房间">
      <el-form ref="banForm" :model="banForm" label-width="120px">
        <el-form-item label="封禁时间" prop="seal_time">
          <el-date-picker
            v-model="banForm.seal_time"
            :rules="{
              required: true,
              message: '请选择日期',
              trigger: 'change'
            }"
            placeholder="选择日期"
            type="datetime"
            value-format="yyyy-MM-dd HH:mm:ss"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item
          :rules="{
            required: true,
            message: '请输入内容',
            trigger: 'blur'
          }"
          label="封禁理由"
          prop="remark"
        >
          <el-input v-model="banForm.remark"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="banVisible = false">取 消</el-button>
        <el-button type="primary" @click="confirmBan('banForm')"
        >确 定
        </el-button
        >
      </div>
    </el-dialog>

    <!-- 解封用户 -->
    <el-dialog :visible.sync="cancelBanVisible" title="信息" width="435px">
      <span style="">确定执行此操作？</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="cancelBanVisible = false">取 消</el-button>
        <el-button type="primary" @click="confirmCancelBan">确 定</el-button>
      </span>
    </el-dialog>

    <!-- 流水设置 -->
    <el-dialog :visible.sync="setWaterVisible" title="流水设置">
      <el-form ref="setWaterForm" :model="setWaterForm" label-width="120px">
        <el-form-item
          :rules="[
            { required: true, message: '请输入内容', trigger: 'blur' },
            { type: 'number', message: '请输入数值' }
          ]"
          label="房间流水百分比"
          prop="percent"
        >
          <el-input v-model.number="setWaterForm.percent"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="setWaterVisible = false">取 消</el-button>
        <el-button type="primary" @click="confirmSetWater('setWaterForm')"
        >确 定
        </el-button
        >
      </div>
    </el-dialog>

    <!-- 删除 -->
    <el-dialog :visible.sync="deleteVisible" title="确定删除吗?" width="435px">
      <span style=""
      ><em style="font-style:normal;color:red">删除后不可恢复</em
      >，你还要继续吗？</span
      >
      <span slot="footer" class="dialog-footer">
        <el-button @click="deleteVisible = false">取 消</el-button>
        <el-button type="primary" @click="confirmDelete">确 定</el-button>
      </span>
    </el-dialog>

    <!-- 批量重置房间热度 -->
    <el-dialog :visible.sync="resetHeatVisible" title="批量重置房间热度" width="435px">
      <span style="">确定要重置房间热度吗？</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="resetHeatVisible = false">取 消</el-button>
        <el-button type="primary" @click="confirmBatchRoom">确 定</el-button>
      </span>
    </el-dialog>

    <!-- 推荐/取消推荐房间 -->
    <el-dialog :title="recommendRoom" :visible.sync="recommendedVisible" width="435px">
      <span style="">{{ isRecommended ? '确定要取消该房间推荐吗？' : '确定要推荐该房间吗？' }}</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="recommendedVisible = false">取 消</el-button>
        <el-button type="primary" @click="confirmRecommend">确 定</el-button>
      </span>
    </el-dialog>

    <!-- 置顶/取消置顶房间 -->
    <el-dialog :title="topRoom" :visible.sync="topVisible" width="435px">
      <span style="">{{ isTop ? '确定要取消该房间置顶吗？' : '确定要置顶该房间吗？' }}</span>
      <div style="margin: 15px 0;"/>
      <!--      <el-checkbox v-model="checkAll" :indeterminate="isIndeterminate" @change="handleCheckAllChange">全选</el-checkbox>-->

      <el-checkbox-group
        v-if="!isTop"
        v-model="checkedItem"
        :min="1"
        @change="handleCheckedChange"
      >
        <el-checkbox v-for="item in classification" :key="item.value" :label="item.value">{{ item.label }}</el-checkbox>
      </el-checkbox-group>
      <span slot="footer" class="dialog-footer">
        <el-button @click="topVisible = false">取 消</el-button>
        <el-button type="primary" @click="confirmTop">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {
  batchResetPop,
  cancelRecommendRoom,
  deleteData,
  getLabelarr,
  getRoomWater,
  getTypearr,
  listData,
  listDetailData,
  postBanRoom,
  postCancelBanRoom,
  postCreateHall,
  postSendPopularity,
  postSetWater,
  putEditData,
  recommendRoom
} from '@/api/room/room'
import { resetRoomAudit, TopRoom } from '../../api/room/room'

const notify = {
  type: 'success',
  message: '操作成功',
  position: 'bottom-right',
  showClose: false,
  duration: 3000
}

export default {
  data() {
    //这里就是整个checkName啦，就是方法一的使用
    const checkLength = (rule, value, callback) => {
      let len = value.toString().length
      if (len !== 6) {
        //重点重点，下面就是填写提示的文字
        callback(new Error('请输入6位数值'))
      } else {
        callback()
      }
    }
    const checkPasswordLength = (rule, value, callback) => {
      if (value) {
        let len = value.toString().length
        if (len !== 4) {
          //重点重点，下面就是填写提示的文字
          callback(new Error('请输入4位密码'))
        } else {
          callback()
        }
      } else {
        callback()
      }
    }
    return {
      checkAll: false,
      isIndeterminate: false,
      classification: [
        {
          label: '精选',
          value: 1
        },
        {
          label: '分类',
          value: 2
        },
        {
          label: '房间',
          value: 3
        },
        {
          label: '消息',
          value: 4
        }
      ],
      checkedItem: [],
      roomPkStatus: [
        { key: 0, lab: '关闭' },
        { key: 1, lab: '开启' }
      ],
      // 置顶/取消置顶房间
      topVisible: false,
      isTop: false,
      isRecommended: false,
      // 推荐/取消推荐房间热度
      recommendedVisible: false,
      // 重置房间热度
      resetHeatVisible: false,

      confirmBtn: false,

      dataIds: undefined,
      room_ids: undefined,
      recommendRoomIds: undefined,
      topRoomIds: undefined,

      // 删除
      deleteVisible: false,

      setWaterForm: {
        percent: undefined
      },
      // 流水设置
      setWaterVisible: false,

      // 解封房间显示
      cancelBanVisible: false,
      banForm: {
        remark: undefined,
        seal_time: undefined
      },
      // 封禁房间显示
      banVisible: false,

      roomWaterListLoading: false,
      roomWaterMenuList: [],
      roomWaterHeadTotalPrice: undefined,
      roomWaterQuery: {
        page: 1,
        perPage: 10,
        total: 0,
        id: undefined,
        start_time: undefined,
        end_time: undefined
      },
      // 房间流水显示
      roomWaterVisible: false,

      createHallFileList: [],
      createHallFormRules: {
        sociaty_name: [
          {
            required: true,
            message: '请输入公会名称1-50字',
            trigger: 'blur',
            min: 1,
            max: 50
          }
        ],
        // description:[{required:true,message:'请输入公会描述',trigger:'blur',min:1,max:200}],
        sociaty_no: [
          { trigger: 'blur', validator: checkLength, required: true }
        ],
        avatar: [{ required: true, message: '请上传图片', trigger: 'change' }]
      },
      createHallForm: {
        sociaty_name: undefined,
        description: undefined,
        sociaty_no: undefined,
        avatar: undefined
      },
      // 创建厅显示
      createHallVisible: false,

      sendPopularityFormRules: {
        popularity: [
          { required: true, message: '请输入赠送人气', trigger: 'blur' }
        ],
        time: [{ required: true, message: '请选择过期时间', trigger: 'change' }]
      },
      sendPopularityForm: {
        room_name: undefined,
        popularity: undefined,
        time: undefined
      },
      // 赠送人气显示
      sendPopularityVisible: false,

      // 编辑
      editDetailFileList: [],
      editDetailFileList2: [],
      listLoading: true,
      total: 0,
      listQuery: {
        page: 1,
        perPage: 10,
        star_state: undefined,
        is_hot: undefined,
        hot_model: undefined,
        type_id: undefined,
        label_id: undefined,
        status: undefined,
        ball_status: undefined,
        start_at: undefined,
        end_at: undefined,
        search: undefined,
        recommend_status: undefined,
        top_status: undefined,
        pk_switch: undefined,
        private: 0
      },
      soundOptions: [],
      labelOptions: [],
      sysTypeOptions: [],
      typeOptions: [],

      menuList: [],
      dialogFormVisible: false,
      dialogStatus: '',
      titleMap: {
        update: '编辑',
        create: '增加'
      },
      type_idStatus: [],
      label_idStatus: [],
      recommend_statusStatus: [
        { key: 0, lab: '否' },
        { key: 1, lab: '是' }
      ],
      top_statusStatus: [
        { key: 0, lab: '否' },
        { key: 1, lab: '是' }
      ],
      star_stateStatus: [
        { key: 0, lab: '非周星房间' },
        { key: 1, lab: '周星房间' }
      ],
      is_hotStatus: [
        { key: 0, lab: '非热门房间' },
        { key: 1, lab: '热门房间' }
      ],
      hot_modelStatus: [
        { key: 0, lab: '普通' },
        { key: 1, lab: '置顶' },
        { key: 2, lab: '轮播' }
      ],
      statusStatus: [
        { key: 0, lab: '隐藏' },
        { key: 1, lab: '显示' }
      ],
      ballStatus: [
        { key: 0, lab: '否' },
        { key: 1, lab: '是' }
      ],
      form: {
        room_id: undefined,
        room_name: undefined,
        password: undefined,
        playing: undefined,
        greeting: undefined,
        label_id: undefined,
        type_id: undefined,
        sys_type_id: 0,
        hot_sort: undefined,
        hot_model: undefined,
        cover_picture: undefined,
        bg_picture: undefined,
        show_ball_game: undefined,
        state: undefined,
        star_state: undefined,
        is_pretty: undefined,
        is_boss_pit: undefined,
        sound_effect_id: undefined,
        pk_switch: undefined
      },
      formrules: {
        password: [{ validator: checkPasswordLength, trigger: 'blur' }],
        cover_picture: [
          { required: true, message: '请上传封面图', trigger: 'blur' }
        ],
        // bg_picture: [
        //   { required: true, message: '请上传背景图', trigger: 'blur' }
        // ],
        show_ball_game: [
          { required: true, message: '请输入续费', trigger: 'blur' }
        ],
        state: [{ required: true, message: '请输入返利', trigger: 'blur' }],
        star_state: [
          { required: true, message: '请输入头像框图片', trigger: 'blur' }
        ],
        is_pretty: [
          { required: true, message: '请输入进场人气加成', trigger: 'blur' }
        ],
        is_boss_pit: [
          { required: true, message: '请输入经验加速', trigger: 'blur' }
        ]
      },
      type_id: 1,
      label_id: 1,
      row_id: undefined,
      // 勾选内容
      multipleSelection: []
    }
  },
  created() {
    this.getList()
    this.getType_id(this.type_id)
    this.getLabel_id(this.label_id)
  },
  computed: {
    recommendRoom() {
      if (this.isRecommended) {
        return '取消房间推荐'
      } else {
        return '房间推荐'
      }
    },
    topRoom() {
      if (this.isTop) {
        return '取消房间置顶'
      } else {
        return '置顶房间'
      }
    },
    classificationValue() {
      return this.classification.map((item) => item.value)
    }

  },
  methods: {
    handleCheckedChange(val) {
      console.log(this.checkedItem)
      let checkedCount = val.length
      this.checkAll = checkedCount === this.classification.length
      this.isIndeterminate = checkedCount > 0 && checkedCount < this.classification.length

    },
    handleCheckAllChange(val) {
      this.checkedItem = val ? this.classificationValue : []
      this.isIndeterminate = false
    },
    searchList() {
      this.listQuery.page = 1
      this.getList()
    },
    handleChangePic(fileList) {
      if (fileList.length > 1) {
        fileList.splice(0, 1)
      }
    },
    // 房间流水
    getRoomWaterList() {
      this.roomWaterListLoading = true
      let urlData = '?'
      if (this.roomWaterQuery.page) {
        urlData = urlData + `page=${this.roomWaterQuery.page}&`
      }
      if (this.roomWaterQuery.perPage) {
        urlData = urlData + `perPage=${this.roomWaterQuery.perPage}`
      }
      if (this.roomWaterQuery.id) {
        urlData = urlData + `&id=${this.roomWaterQuery.id}`
      }
      if (this.roomWaterQuery.start_time) {
        urlData = urlData + `&start_time=${this.roomWaterQuery.start_time}`
      }
      if (this.roomWaterQuery.end_time) {
        urlData = urlData + `&end_time=${this.roomWaterQuery.end_time}`
      }
      getRoomWater(urlData).then(response => {
        if (response.code === 200) {
          this.roomWaterMenuList = response.data.list
          this.roomWaterQuery.total = response.data.meta.total
          this.roomWaterHeadTotalPrice = response.data.header.total_price
          this.roomWaterListLoading = false
        }
      })
    },
    resetRoomWaterList() {
      this.roomWaterQuery.start_time = undefined
      this.roomWaterQuery.end_time = undefined
    },
    beforeAvatarUpload(file) {
      this.form.head_picture = file
    },
    handleEditDetailSuccess() {
      this.form.cover_picture = this.ossLastImgUrl
      this.editDetailFileList = [{ url: this.ossLastImgUrl }]
    },
    handleEditDetailRemove() {
      this.form.cover_picture = undefined
      this.editDetailFileList = []
    },
    handleEditDetailSuccess2() {
      this.form.bg_picture = this.ossLastImgUrl
      this.editDetailFileList2 = [{ url: this.ossLastImgUrl }]
    },
    handleEditDetailRemove2() {
      this.form.bg_picture = undefined
      this.editDetailFileList2 = []
    },
    handleCreateHallSuccess() {
      this.createHallForm.avatar = this.ossLastImgUrl
      this.createHallFileList = [{ url: this.ossLastImgUrl }]
    },
    handleCreateHallRemove() {
      this.createHallForm.avatar = undefined
      this.createHallFileList = []
    },
    getType_id(typeId) {
      let urlData = `?type=${typeId}`
      getTypearr(urlData).then(response => {
        if (response.code === 200) {
          for (let i in response.data) {
            this.type_idStatus.push({ key: i, lab: response.data[i] })
          }
        }
      })
    },
    getLabel_id(typeId) {
      let urlData = `?type=${typeId}`
      getLabelarr(urlData).then(response => {
        if (response.code === 200) {
          for (let i in response.data) {
            this.label_idStatus.push({ key: i, lab: response.data[i] })
          }
        }
      })
    },
    getList() {
      this.listLoading = true
      listData(this.listQuery).then(({ data }) => {
        this.menuList = data.list
        this.total = data.meta.total
        this.listLoading = false
        this.confirmBtn = false
      })
    },
    /* 重置表单 */
    resetList() {
      Object.keys(this.listQuery).forEach(key =>
        this.$set(this.listQuery, key, undefined)
      )
      this.listQuery.page = 1
      this.listQuery.perPage = 10
    },
    handleCreate(row) {
      this.resetForm()
      this.dialogStatus = 'create'
      this.dialogFormVisible = true
    },
    allDel() {
      if (this.confirmBtn) return
      this.confirmBtn = true
      let delNum = []
      this.$refs.dataList.selection.forEach(k => {
        delNum.push(k.id)
      })
      if (delNum.length === 0) {
        return
      }
      let data = { ids: delNum.toString() }
      deleteData(data).then(response => {
        if (response.code === 200) {
          this.getList()
          this.$notify(notify)
        } else {
          this.confirmBtn = false
        }
      })
    },
    submitForm() {
      if (this.confirmBtn) return
      this.$refs['dataForm'].validate(valid => {
        if (valid) {
          this.confirmBtn = true
          let obj = {}
          for (let key in this.form) {
            if (
              this.form[key] !== undefined &&
              this.form[key] !== null &&
              this.form[key] !== ''
            ) {
              obj[key] = this.form[key]
            }
          }
          putEditData(this.row_id, obj).then(response => {
            if (response.code === 200) {
              this.getList()
              this.$notify(notify)
              this.dialogFormVisible = false
            } else {
              this.confirmBtn = false
              this.$message({
                message: response.message,
                type: 'error'
              })
            }
          })
        }
      })
    },
    formatData(obj) {
      return Object.keys(obj).reduce((preResult, current) => {
        preResult.push({ value: parseInt(current), label: obj[current] })
        return preResult
      }, [])
    },
    rowUpdate(row) {
      this.row_id = row.id
      listDetailData(row.id).then(
        ({
          data: {
            type,
            sys_type,
            room_label,
            room_sound_effect,
            room_id,
            room_name,
            label_id,
            type_id,
            sys_type_id,
            hot_sort,
            hot_model,
            playing,
            greeting,
            cover_picture,
            bg_picture,
            show_ball_game,
            state,
            is_pretty,
            is_boss_pit,
            sound_effect_id,
            pk_switch
          }
        }) => {
          if (
            this.typeOptions.length === 0 ||
            this.sysTypeOptions.length === 0 ||
            this.labelOptions.length === 0 ||
            this.soundOptions.length === 0
          ) {
            this.typeOptions = []
            this.sysTypeOptions = []
            this.labelOptions = []
            this.soundOptions = []

            this.typeOptions = this.formatData(type)
            this.sysTypeOptions = this.formatData(sys_type)
            this.labelOptions = this.formatData(room_label)
            this.soundOptions = this.formatData(room_sound_effect)
          }

          this.form.password = ''
          this.form.room_id = room_id
          this.form.room_name = room_name
          this.form.label_id = parseInt(label_id)
          this.form.type_id = parseInt(type_id)
          if (parseInt(sys_type_id) !== 0) {
            this.form.sys_type_id = parseInt(sys_type_id)
          } else {
            this.form.sys_type_id = undefined
          }

          this.form.hot_sort = hot_sort
          this.form.hot_model = hot_model
          this.form.playing = playing
          this.form.greeting = greeting
          if (cover_picture) {
            this.form.cover_picture = cover_picture
            this.editDetailFileList = [{ url: cover_picture }]
          } else {
            this.form.cover_picture = undefined
            this.editDetailFileList = []
          }

          if (bg_picture) {
            this.form.bg_picture = bg_picture
            this.editDetailFileList2 = [{ url: bg_picture }]
          } else {
            this.form.bg_picture = undefined
            this.editDetailFileList2 = []
          }

          this.form.show_ball_game = show_ball_game
          this.form.state = state
          this.form.star_state = state
          this.form.is_pretty = is_pretty
          this.form.is_boss_pit = is_boss_pit
          this.form.pk_switch = pk_switch
          if (sound_effect_id) {
            this.form.sound_effect_id = parseInt(sound_effect_id)
          } else {
            this.form.sound_effect_id = undefined
          }
          this.dialogStatus = 'update'
          this.dialogFormVisible = true
        }
      )
    },
    rowWater(row) {
      this.row_id = row.id
      this.roomWaterQuery.id = row.id
      this.roomWaterQuery.page = 1
      this.roomWaterQuery.perPage = 10
      this.roomWaterQuery.start_time = undefined
      this.roomWaterQuery.end_time = undefined
      this.getRoomWaterList()
      this.roomWaterVisible = true
    },

    rowPopularity(row) {
      this.row_id = row.id
      this.sendPopularityForm.room_name = row.room_name
      this.sendPopularityVisible = true
    },
    confirmSendPopularity(formName) {
      if (this.confirmBtn) return

      this.$refs[formName].validate(valid => {
        if (valid) {
          this.confirmBtn = true
          let obj = {}
          obj.expire_time = this.sendPopularityForm.time
          obj.popularity = Number(this.sendPopularityForm.popularity)
          postSendPopularity(this.row_id, obj).then(response => {
            if (response.code === 200) {
              this.getList()
              this.sendPopularityVisible = false
              this.$notify(notify)
            } else {
              this.confirmBtn = false
            }
          })
        } else {
          return false
        }
      })
    },
    rowHall(row) {
      this.row_id = row.id
      this.createHallForm = {
        sociaty_name: undefined,
        description: undefined,
        sociaty_no: undefined,
        avatar: undefined
      }
      this.createHallFileList = []
      this.createHallVisible = true
    },
    confirmCreateHall(formName) {
      if (this.confirmBtn) return
      this.$refs[formName].validate(valid => {
        if (valid) {
          this.confirmBtn = true
          let obj = Object.assign({ id: this.row_id }, this.createHallForm)
          postCreateHall(obj).then(response => {
            if (response.code === 200) {
              this.getList()
              this.createHallVisible = false
              this.$notify({
                type: 'success',
                message: '操作成功',
                position: 'bottom-right',
                showClose: false,
                duration: 3000
              })
            } else {
              this.confirmBtn = false
            }
          })
        } else {
          return false
        }
      })
    },
    rowBan(row) {
      this.row_id = row.id
      this.banVisible = true
    },
    confirmBan(formName) {
      if (this.confirmBtn) return

      this.$refs[formName].validate(valid => {
        if (valid) {
          this.confirmBtn = true
          let obj = Object.assign({ id: this.row_id }, this.banForm)
          postBanRoom(obj).then(response => {
            if (response.code === 200) {
              this.getList()
              this.banVisible = false
              this.$notify({
                type: 'success',
                message: '操作成功',
                position: 'bottom-right',
                showClose: false,
                duration: 3000
              })
            } else {
              this.confirmBtn = false
            }
          })
        } else {
          return false
        }
      })
    },
    resetAudit(row) {
      resetRoomAudit({ room_id: row.id }).then(response => {
        if (response.code === 200) {
          this.getList()
          this.$notify({
            type: 'success',
            message: '操作成功',
            position: 'bottom-right',
            showClose: false,
            duration: 3000
          })
        } else {
          this.confirmBtn = false
        }
      })
    },
    rowCancelBan(row) {
      this.row_id = row.id
      this.cancelBanVisible = true
    },
    confirmCancelBan() {
      if (this.confirmBtn) return
      this.confirmBtn = true
      postCancelBanRoom({ id: this.row_id }).then(response => {
        if (response.code === 200) {
          this.getList()
          this.cancelBanVisible = false
          this.$notify({
            type: 'success',
            message: '操作成功',
            position: 'bottom-right',
            showClose: false,
            duration: 3000
          })
        } else {
          this.confirmBtn = false
        }
      })
    },
    rowWaterSet(row) {
      this.row_id = row.id
      this.setWaterVisible = true
    },
    confirmSetWater(formName) {
      if (this.confirmBtn) return
      this.$refs[formName].validate(valid => {
        if (valid) {
          this.confirmBtn = true
          let obj = {}
          obj.water_ratio = parseInt(this.setWaterForm.percent)
          postSetWater(this.row_id, obj).then(response => {
            if (response.code === 200) {
              this.getList()
              this.setWaterVisible = false
              this.$notify({
                type: 'success',
                message: '操作成功',
                position: 'bottom-right',
                showClose: false,
                duration: 3000
              })
            } else {
              this.confirmBtn = false
            }
          })
        } else {
          return false
        }
      })
    },
    rowDelete(row) {
      this.deleteVisible = true
      this.dataIds = { ids: row.id }
    },
    // 勾选
    handleSelectionChange(val) {
      this.multipleSelection = val
    },
    // 点击批量删除
    handleDeleteAll() {
      if (this.multipleSelection.length === 0) {
        this.$message({ message: '请先勾选要删除的内容', type: 'warning' })
        return
      } else if (this.multipleSelection.length !== 0) {
        let ids = ''
        for (let key in this.multipleSelection) {
          ids += `${this.multipleSelection[key].id},`
        }
        ids = ids.substring(0, ids.length - 1)
        this.dataIds = { ids: ids }
      }
      this.deleteVisible = true
    },
    // 确定删除
    confirmDelete() {
      if (this.confirmBtn) return
      this.confirmBtn = true
      this.deleteDialogVisible = false
      deleteData(this.dataIds).then(data => {
        if (data.code === 200) {
          this.getList()
          this.deleteVisible = false
          this.$notify({
            type: 'success',
            message: '操作成功',
            position: 'bottom-right',
            showClose: false,
            duration: 3000
          })
        } else {
          this.confirmBtn = false
        }
      })
    },
    resetForm() {
      Object.keys(this.form).forEach(key =>
        this.$set(this.form, key, undefined)
      )
    },
    // 监听dialog关闭时的处理事件
    handleDialogClose() {
      if (this.$refs['dataForm'])
        /* 清除整个表单的校验 */{
        this.$refs['dataForm'].clearValidate()
      }
    },
    handleResetHeat() {
      if (this.multipleSelection.length === 0) {
        this.$message({ message: '请先勾选内容', type: 'warning' })
        return
      } else if (this.multipleSelection.length !== 0) {
        let ids = []
        for (let key in this.multipleSelection) {
          ids.push(this.multipleSelection[key].id)
        }
        this.room_ids = { room_ids: ids }
      }
      this.resetHeatVisible = true
    },
    showRecommendedRoom(row) {
      if (row.recommend_status === 1) {
        this.isRecommended = true
      } else {
        this.isRecommended = false
      }
      this.recommendRoomIds = {
        room_ids: [row.id]
      }
      this.recommendedVisible = true
    },
    showTopRoom(row) {
      if (row.top_status === 1) {
        this.isTop = true
      } else {
        this.isTop = false
      }
      this.topRoomIds = {
        room_ids: row.id
      }
      this.checkedItem = []
      this.topVisible = true
    },
    confirmBatchRoom() {
      batchResetPop(this.room_ids).then(data => {
        if (data.code === 200) {
          this.getList()
          this.$notify({
            type: 'success',
            message: '操作成功',
            position: 'bottom-right',
            showClose: false,
            duration: 3000
          })
          this.resetHeatVisible = false
        }
      })
    },
    confirmRecommend() {
      if (this.isRecommended) {
        cancelRecommendRoom(this.recommendRoomIds).then(data => {
          if (data.code === 200) {
            this.getList()
            this.$notify({
              type: 'success',
              message: '操作成功',
              position: 'bottom-right',
              showClose: false,
              duration: 3000
            })
            this.recommendedVisible = false
          }
        })
      } else {
        recommendRoom(this.recommendRoomIds).then(data => {
          if (data.code === 200) {
            this.getList()
            this.$notify({
              type: 'success',
              message: '操作成功',
              position: 'bottom-right',
              showClose: false,
              duration: 3000
            })
            this.recommendedVisible = false
          }
        })
      }
      this.recommendRoomIds = []

    },
    confirmTop() {
      if (!this.checkedItem.length && !this.isTop) return this.$message.error('至少选择一项')
      let room_data = {
        room_id: this.topRoomIds.room_ids,
        op_type: this.isTop ? 2 : 1,
        stick_type: this.checkedItem
      }
      TopRoom(room_data).then(data => {
        if (data.code === 200) {
          this.getList()
          this.$notify({
            type: 'success',
            message: '操作成功',
            position: 'bottom-right',
            showClose: false,
            duration: 3000
          })
          this.topVisible = false
        }
      })

    }
  }
}
</script>
